<template>
	<view>
		<view style="position: relative;">
			<image src="https://zhcxservice.145u.net/Images/ZHCX/chengjikuaiche1.png" style="width: 750rpx;"
				mode="widthFix"></image>
			<view hover-class="u-hover-class" class="bg-f flex-center flex-col "
				style="position: absolute;top: 30rpx;right: 30rpx; z-index: 2;width: 90rpx;height: 90rpx;border-radius: 100rpx;letter-spacing: 2rpx;"
				@click="goToOrder()">
				<view style="font-size: 28rpx;font-weight: 700">预定</view>
				<view style="font-size: 28rpx;font-weight: 700">记录</view>
			</view>
		</view>
		<view style="margin: 30rpx;margin-top: -180rpx;position: relative;z-index: 999;">
			<view style="padding: 30rpx;" class="bg-f flex flex-ac flex-bt">
				<view>
					<view class="flex flex-ac">
						<view class="dot-blue"></view>
						<view style="margin-left: 20rpx;">
							<u-input v-model="startPoint.name" :height="80" placeholder="请选择出发点"
								:custom-style="customStyle_input" :placeholder-style="placeholderStyle" :disabled="true"
								@click="selectAddress(0)" />
						</view>
					</view>
					<!-- 途经点 -->
					<!-- <view class="flex flex-ac" v-for="(item,index) in centerPoint" :key="index">
						<u-icon name="close" color="#333" size="20" @click="delCenterPonit(index)"></u-icon>
						<view style="margin-left: 20rpx;">
							<u-input v-model="item.name" :height="80" :placeholder="'请选择途经点'+(index+1)"
								:custom-style="customStyle_input" :placeholder-style="placeholderStyle" :disabled="true"
								@click="selectAddress(1,index)" />
						</view>
					</view> -->
					<view class="flex flex-ac">
						<view class="dot-red"></view>
						<view style="margin-left: 20rpx;">
							<u-input v-model="endPoint.name" :height="80" placeholder="请选择目的地"
								:custom-style="customStyle_input" :placeholder-style="placeholderStyle" :disabled="true"
								@click="selectAddress(2)" />
						</view>
					</view>
				</view>
				<view>
					<!-- <u-icon name="plus" color="#2979ff" size="48" @click="addCenterPoint()"></u-icon> -->
				</view>
			</view>
			<!-- 选择时间 -->
			<view style="padding: 30rpx;margin-top: 30rpx;" class="bg-f">
				<view class="flex flex-ac flex-bt">
					<view>
						<u-input v-model="startTime" :height="80" placeholder="请选择出发时间"
							:placeholder-style="placeholderStyle" :disabled="true" @click="selectTime(0)" />
					</view>
					<view>
						<u-input v-model="endTime" :height="80" placeholder="请选择结束时间"
							:placeholder-style="placeholderStyle" :disabled="true" @click="selectTime(1)" />
					</view>
				</view>
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>包车类型</view>
					<view style="width: 200rpx;">
						<u-subsection :list="typeList" :current="current" font-size="30" inactive-color="#A7A9B7"
							bg-color="#E9EDF5" active-color="#FFF" button-color="#F35A46" :btPadding="4" :bdRadius="100"
							@change="subsectionChange()"></u-subsection>
					</view>
				</view>
			</view>
			<!-- 选择车辆人数 -->
			<view style="padding:0 30rpx;margin-top: 30rpx;" class="bg-f">
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>订车人</view>
					<view><u-input v-model="bookName" :height="80" placeholder="请填写订车人姓名" input-align="right" /></view>
				</view>
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>订车人联系方式</view>
					<view><u-input v-model="bookPhone" :height="80" placeholder="请填写订车人联系方式" input-align="right" />
					</view>
				</view>
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>乘车人数</view>
					<view><u-number-box v-model="peopleNum" :min="1"></u-number-box></view>
				</view>
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>选择车辆</view>
					<view style="color: #909399;" @click="popShow=true">
						{{carText=="请选择"?carText:carText+"，"+carNum+"辆，可乘坐"+seatNum+"人"}}
					</view>
				</view>
				<view class="flex flex-ac flex-bt" style="border-bottom: 1rpx solid #eee;padding: 30rpx 0;">
					<view>包车用途</view>
					<view><u-input v-model="useReason" :height="80" placeholder="如:婚假,旅游等" input-align="right" /></view>
				</view>
				<view style="padding: 30rpx 0;">
					<view>乘车备注（选填）</view>
					<view style="padding-top: 30rpx ;">
						<textarea v-model="remark" placeholder="请填写备注"
							style="border: 1rpx solid #eee;width: auto;padding: 10rpx;"></textarea>
					</view>
				</view>
				<view style="padding: 30rpx; display: flex;align-items: center;">
					<view class="checkbox" style="width: 40rpx;height: 40rpx;line-height: 35rpx;"
						:class="checked ? 'checkbox-activite' : ''" @click="checked=!checked">
						<u-icon name="checkmark" color="#FFF" size="35"></u-icon>
					</view>
					<view style="padding: 0 10rpx;">我已阅读并同意</view>
					<text style="color: #007AFF;" @click="noticShow=true">《包车须知》</text>
				</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<!-- 底部预定按钮 -->
		<view class="bg-f flex flex-bt" style="position: fixed;bottom: 0;left: 0;right: 0;z-index: 1000;flex: 1;">
			<!-- <view class="flex" style="padding: 30rpx ;align-items: center;">
				<view>预估金额：</view>
				<view class="fw-700" style="color: #F35A46;font-size: 36rpx;">999</view>
				<view class="fw-700" style="color: #F35A46;font-size: 30rpx;">元</view>
			</view> -->
			<view>
				<button class="float-button" hover-class="hover-btn-bg" @click="serviceShow=true">
					服务热线
				</button>
			</view>
			<!-- <view style="width: 50%;"><u-button type="primary" :custom-style="{'border-radius':0,height:'100rpx'}"
					@click="serviceShow=true">服务热线</u-button></view> -->
			<view style="width: 100%;"><u-button hover-class="none" :hair-line="false" :custom-style="customStyle"
					@click="submit()">立即预定</u-button></view>
		</view>
		<!-- 时间选择 -->
		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="selectConfirm()"></u-select>
		<!-- 车辆选择 -->
		<u-popup v-model="popShow" mode="bottom" length="90%" border-radius="36">
			<view class="pd-30 bg-FF" style=";border-bottom: 1rpx solid #eee; position: sticky;top: 0;">
				<view class="flex flex-ac flex-bt">
					<view style="font-size: 34rpx;font-weight: bold;letter-spacing: 4rpx;">请选择车辆</view>
					<view><u-icon name="close" size="36" color="#909399" @click="popShow=false"></u-icon></view>
				</view>
				<view class="flex flex-ac flex-bt" style="margin-top: 30rpx;font-size: 30rpx;letter-spacing: 2rpx;">
					<view class="flex flex-ac">
						<view>已选择<text style="color: #F35A46;font-size: 32rpx;">{{priceObj==""?0:carNum}}</text>辆</view>
						<view style="padding-left: 30rpx;">可乘坐<text
								style="color: #F35A46;font-size: 32rpx;">{{seatNum}}</text>人
						</view>
					</view>
					<view style="text-align: center;">
						<view>车辆数</view>
						<view><u-number-box v-model="carNum" :min="1" :disabled-input="true"
								@change="change()"></u-number-box></view>
					</view>
				</view>
			</view>
			<view>
				<view class="flex flex-ac pd-30" style="border-bottom: 1rpx solid #eee;" v-for="(item,index) in carArr"
					:key="index">
					<view style="padding: 20rpx 30rpx;">
						<image :src="item.ImagePath" style="width: 150rpx;height: 150rpx;" mode="aspectFill "></image>
					</view>
					<view class="flex flex-col flex-bt" style="width: 430rpx;height: 140rpx;">
						<view style="font-size: 32rpx;">{{item.CoachTypeName.split(";")[0]}}</view>
						<view style="font-size: 28rpx;color: #909399;">可乘坐{{item.Seats}}人</view>
					</view>
					<view>
						<view class="checkbox" :class="item.checked ? 'checkbox-activite' : ''"
							@click="selectCar(index)">
							<u-icon name="checkmark" color="#FFF" size="32"></u-icon>
						</view>
					</view>
				</view>
				<view style="height: 120rpx;"></view>
				<view class="bg-FF" style="position: fixed;bottom: 0;padding: 30rpx;border-top: 1rpx solid #eee;">
					<view style="width: 690rpx;"><u-button type="primary" :custom-style="{'border-radius': 0}"
							@click="confirm()">确定</u-button></view>
				</view>
			</view>
		</u-popup>
		<!-- 包车须知 -->
		<u-popup v-model="noticShow" mode="bottom" length="60%" border-radius="36">
			<view class="pd-30 bg-FF" style="position: sticky;top: 0;">
				<view class="flex flex-ac flex-bt">
					<view></view>
					<view style="font-size: 36rpx;font-weight: bold;letter-spacing: 4rpx;">包车须知</view>
					<view><u-icon name="close" size="36" color="#909399" @click="noticShow=false"></u-icon></view>
				</view>
			</view>
			<view style="padding: 30rpx;font-size: 30rpx;letter-spacing: 3rpx;">
				{{notice}}
			</view>
		</u-popup>
		<!-- 客服电话 -->
		<u-popup v-model="serviceShow" mode="bottom" length="90%" border-radius="36">
			<view class="pd-30 bg-FF" style="position: fixed;top: 0;left: 0;right: 0;">
				<view class="flex flex-ac flex-bt">
					<view></view>
					<view style="font-size: 36rpx;font-weight: bold;letter-spacing: 4rpx;">服务热线</view>
					<view><u-icon name="close" size="36" color="#909399" @click="serviceShow=false"></u-icon></view>
				</view>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="pd-30 fw-700" style="border-bottom: 1rpx solid #eee;letter-spacing: 4rpx;font-size: 32rpx;"
				v-for="(item,index) in itemdata" :key="index">
				<view style="font-size: 34rpx;">{{item.affiliationname}}</view>
				<view style="margin-left: 20rpx;margin-top: 20rpx;">
					<view>联系人：{{item.address}}</view>
					<view class="flex flex-bt flex-ac" style="padding: 10rpx 0;">
						<view>联系电话：{{item.tellnumber}}</view>
						<view hover-class="u-hover-class" class="checkbox-activite"
							style="padding: 5rpx 10rpx;border-radius:10rpx;color: #FFF;font-size: 28rpx;"
							@click="callService(item.tellnumber)">拨打</view>
					</view>
					<view>业务范围：{{item.scope}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var that;
	var timeType; //时间类型，0是开始时间，1是结束时间
	var Url = 'https://chuxing.mbxing.com';
	export default {
		data() {
			return {
				serviceShow: false,
				noticShow: false,
				checked: false,
				popShow: false,
				peopleNum: 0,
				carNum: 1, //车辆数
				seatNum: 0, //可乘坐人数
				priceObj: "", //选择车的数据价格
				startTime: '',
				endTime: '',
				bookName: '',
				bookPhone: '',
				show: false,
				list: [],
				typeList: [{
					name: '单趟'
				}, {
					name: "往返"
				}],
				current: 0, //定制客运类型选中的值
				startPoint: "",
				endPoint: "",
				centerPoint: [],
				placeholderStyle: 'font-size:32rpx;color:#909399;',
				customStyle_popup: {
					"border-top-left-radius": "32rpx",
					"border-top-right-radius": "32rpx"
				},
				customStyle_input: {
					width: '500rpx'
				},
				customStyle: {
					'border-radius': 0,
					"background": "linear-gradient(270deg, #FF423F, #FF763F)",
					"color": '#FFF',
					'border': 0,
					height: '100rpx'
				},
				carArr: [],
				remark: '', //备注
				carText: '请选择',
				useReason: '',
				notice: '',
				userInfo: '',
				itemdata: [{
					affiliationname: '建阳区',
					tellnumber: '18960622265',
					rescuenumber: '',
					address: '陈先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '延平区',
					tellnumber: '13305990555',
					rescuenumber: '',
					address: '陈先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '建瓯市',
					tellnumber: '13706904333',
					rescuenumber: '',
					address: '谢先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '邵武市',
					tellnumber: '18650665969',
					rescuenumber: '',
					address: '李女士',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '浦城县',
					tellnumber: '18950656622',
					rescuenumber: '',
					address: '吴先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '光泽县',
					tellnumber: '13960638863',
					rescuenumber: '',
					address: '袁先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '顺昌县',
					tellnumber: '16605995801',
					rescuenumber: '',
					address: '王先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '松溪县',
					tellnumber: '17720693198',
					rescuenumber: '',
					address: '何先生',
					scope: '省际、市际、县际、县内旅游包车',
				}, {
					affiliationname: '政和县',
					tellnumber: '16605995955',
					rescuenumber: '',
					address: '范先生',
					scope: '省际、市际、县际、县内旅游包车',
				}]
			}
		},
		onLoad() {
			that = this;
			that.userInfo = uni.getStorageSync("userInfo") || "";
			if (that.userInfo == "") {
				uni.showToast({
					title: "您还未登录,请先登录",
					mask: true,
					icon: "none"
				})
				uni.$emit('getAuthorize', {
					data: '授权'
				});
				return;
			}
			this.getPriceList();
		},
		methods: {
			/****************************************************************/
			callService: function(e) {
				uni.makePhoneCall({
					phoneNumber: e
				})
			},
			/*****************时间选择 Start*********************************/
			selectTime: function(e) {
				timeType = e;
				var date = new Date().getTime();
				var hour = new Date().getHours();
				var arr = [];
				for (var i = 0; i < 60; i++) {
					var time = date + 60 * 60 * 24 * 1000 * i;
					var obj = {
						value: this.$u.timeFormat(time, 'yyyy-mm-dd'),
						label: this.$u.timeFormat(time, 'yyyy-mm-dd'),
						children: []
					}
					for (var j = 0; j < 24; j++) {
						var obj1 = {
							value: j > 9 ? j : "0" + j,
							label: (j > 9 ? j : "0" + j) + "点",
							children: []
						}
						for (var k = 0; k < 6; k++) {
							var m = 10 * k;
							var obj2 = {
								value: m > 9 ? m : "0" + m,
								label: (m > 9 ? m : "0" + m) + "分",
							}
							obj1.children.push(obj2)
						}
						if (i == 0) {
							if (j > hour + 3) { //预约4小时后的
								obj.children.push(obj1)
							}
						} else {
							obj.children.push(obj1)
						}
					}
					if (i == 0 && hour >= 20) { //当天超过20点智能预约下一天

					} else {
						arr.push(obj);
					}
				}
				that.list = JSON.parse(JSON.stringify(arr));
				this.show = true;
			},
			selectConfirm: function(e) { 
				var data = `${e[0].value} ${e[1].value}:${e[2].value}`
				if (timeType == 0) {
					if (this.endTime != '') {
						if (new Date(this.endTime).getTime() <= new Date(data).getTime()) {
							uni.showToast({
								title: "出发时间要小于出行时间",
								icon: "none"
							})
							return;
						}
					}
					this.startTime = data;
				} else if (timeType == 1) {
					if (this.startTime != '') {
						if (new Date(this.startTime).getTime() >= new Date(data).getTime()) {
							uni.showToast({
								title: "出发时间要小于出行时间",
								icon: "none"
							})
							return;
						}
					}
					this.endTime = data;
				}
			},
			subsectionChange: function(e) {
				this.current = e;
			},
			/*****************途经点开始*********************************/
			//添加途经点
			addCenterPoint: function() {
				if (that.centerPoint.length >= 5) {
					return;
				}
				var obj = {
					name: '',
					lat: '',
					lng: '',
				}
				that.centerPoint.push(obj);
			},
			//删除途经点
			delCenterPonit: function(e) {
				that.centerPoint.splice(e, 1)
			},
			/*****************途经点end*********************************/
			//选择地址
			selectAddress: function(type, e) {
				//type 0出发点，1途经点，2目的地
				uni.chooseLocation({
					success(res) {
						var obj = {
							name: res.name,
							lat: res.latitude,
							lng: res.longitude,
							address: res.address,
						}
						if (type == 0) {
							that.startPoint = obj;
						}
						if (type == 1) {
							var arr = [];
							//循环重新赋值，解决数据更新不渲染问题
							for (var i = 0; i < that.centerPoint.length; i++) {
								if (i == e) {
									arr.push(obj)
								} else {
									arr.push(that.centerPoint[i])
								}
							}
							that.centerPoint = arr;
						}
						if (type == 2) {
							that.endPoint = obj;
						}
					}
				})
			},
			change: function(e) {
				if (this.priceObj != '') {
					this.seatNum = this.priceObj.Seats * this.carNum;
				}
			},
			confirm: function() {
				if (this.seatNum < this.peopleNum) {
					uni.showToast({
						title: '可乘坐人数小于乘车人数',
						icon: 'none',
						mask: true
					})
					return;
				}
				this.popShow = false;
			},
			//-------------------车辆类型选择事件------------------------------------------
			selectCar: function(e) {
				for (var i = 0; i < this.carArr.length; i++) {
					this.$set(this.carArr[i], "checked", false);
					if (i == e) {
						this.priceObj = this.carArr[i];
						this.change();
						this.$set(this.carArr[i], "checked", true);
						this.carText = this.priceObj.CoachTypeName.split(";")[0];
					}
				}
			},
			// ---------------------------下单接口相关-------------------------------------
			//获取包车须知
			getBookNotice: function() {
				uni.request({
					url: Url + '/api/CharteredBus/BookNotice',
					method: "POST",
					success(res) {
						if (res.data.IsSuccess) {
							that.notice = res.data.Data;
						}
					}
				})
			},
			//获取车辆价格
			getPriceList: function() {
				this.getBookNotice();
				uni.request({
					url: Url + '/api/CharteredBus/GetPriceList',
					method: "POST",
					success(res) {
						if (res.data.IsSuccess) {
							that.carArr = res.data.Data;
						}
					}
				})
			},
			//提交数据，校验
			submit: function() {
				if (that.userInfo == "") {
					uni.showToast({
						title: "您还未登录,请先登录",
						mask: true,
						icon: "none"
					})
					return;
				}
				if (!this.checked) {
					this.showToast("请阅读并同意包车须知", "none");
					return;
				}
				if (this.startPoint == "") {
					this.showToast("请选择出发地点", "none");
					return;
				}
				if (this.endPoint == "") {
					this.showToast("请选择目的地", "none");
					return;
				}
				if (this.startTime == "") {
					this.showToast("请选择出发时间", "none");
					return;
				}
				if (this.endTime == "") {
					this.showToast("请选择结束时间", "none");
					return;
				}
				if (this.bookName == "") {
					this.showToast("请填写订车人姓名", "none");
					return;
				}
				if (this.bookPhone == "") {
					this.showToast("请填写订车人联系方式", "none");
					return;
				}
				if (this.peopleNum == 0 || this.peopleNum == NaN || this.peopleNum == "") {
					this.showToast("请填写出行人数", "none");
					return;
				}
				if (this.priceObj == "") {
					this.showToast("请选择车辆类型和车辆数", "none");
					return;
				}
				if (this.seatNum < this.peopleNum) {
					uni.showToast({
						title: '可乘坐人数小于乘车人数',
						icon: 'none',
						mask: true
					})
					return;
				}
				uni.showLoading({
					title: "正在提交,请稍后",
					mask: true
				})
				this.Booking();
			},
			//下单
			Booking: function() {
				uni.request({
					url: Url + '/api/CharteredBus/Booking',
					method: "POST",
					data: {
						StartTime: that.startTime,
						EndTime: that.endTime,
						PriceID: that.priceObj.AID,
						Remark: that.remark,
						ClientPhone: that.bookPhone,
						ClinetName: that.bookName,
						IsBack: that.current == 0 ? false : true,
						StartSiteName: that.startPoint.name,
						StartLoction: `${that.startPoint.lng},${that.startPoint.lat}`,
						StartAddress: that.startPoint.address,
						EndLoction: `${that.endPoint.lng},${that.endPoint.lat}`,
						EndSiteName: that.endPoint.name,
						EndAddress: that.endPoint.address,
						ClientID: that.userInfo.Id,
						UseType: that.useReason,
						PeopleCount: that.peopleNum,
						CoachCount: that.carNum
					},
					success(res) {
						if (res.data.IsSuccess) {
							that.showToast("预订成功，稍后将有工作人员与您联系", "none");
							setTimeout(() => {
								that.goToOrder();
							}, 1500)
						}
					},
					fail() {
						that.showToast("提交失败", "none");
					},
					complete() {
						uni.hideLoading();
					},
				})
			},
			goToOrder: function() {
				uni.navigateTo({
					url: '../OrderList/OrderList'
				})
			},
			//-----------------------通用提示框------------------
			showToast: function(title, icon) {
				uni.showToast({
					title: title,
					mask: true,
					icon: icon,
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee80;
	}

	.checkbox {
		width: 50rpx;
		height: 50rpx;
		border: solid 1rpx #999;
		border-radius: 100%;
		text-align: center;
		line-height: 45rpx;
	}

	.checkbox-activite {
		background: linear-gradient(270deg, #ef7d4e, #ec5249);
		border-color: #ec5249;
	}

	.bg-f {
		background-color: #FFF;
		box-shadow: 0 0 10rpx 5rpx #FFFFFF60;
	}

	.flex {
		display: flex;
	}

	.dot-red {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #F35A46;
	}

	.dot-blue {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #2979ff;
	}

	.float-button {
		position: fixed;
		left: 0px;
		bottom: 250px;
		color: #FFF;
		width: 35px;
		/* height: 55px; */
		/* border-radius: 30%; */
		background: #4A98EA;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
		z-index: 999;
	}

	.hover-btn-bg {
		background-color: green;
		color: #fff;
	}
</style>